<template>
  <div class="authentication_backfill">
    <div class="tip tc">
      <p>打款已受理！预计 <span class="danger fontw">2小时</span>内到账</p>
      <a-alert class="inline-b" type="warning" show-icon>
        <div slot="message">
          回填金额剩余次数<span class="danger fontw">
            {{ randomamountcount }} </span
          >次。1分钟后可重新申请打款，剩余打款次数<span class="danger fontw">
            {{ remitTime }} </span
          >次
        </div>
      </a-alert>
    </div>
    <div class="form_wrapper">
      <c-form
        v-model="form"
        :col="{ labelCol: { span: 10 }, wrapperCol: { span: 14 } }"
        ref="form"
        :data="formData"
        :rules="formRules"
        @submit="submit"
        :submitLoading="submitLoading"
      >
        <template v-slot:labelOpenCa>
          <a-popover title="" placement="top" arrow-point-at-center>
            <template slot="content">
              <span
                >CA签署账号，就是企业在聚点商城平台电子签署时用到企业签署账号，主要用于电子合同签署具有法律效应。</span
              >
            </template>
            <a-icon type="question-circle" theme="filled" class="caTip" />
          </a-popover>
          <span> 是否生成CA签署账号</span>
        </template>
        <template v-slot:openCa>
          <div class="openCa">
            <a-radio-group v-model="form.openCa">
              <a-radio :value="1">
                是
              </a-radio>
              <a-radio :value="0">
                否
              </a-radio>
            </a-radio-group>
          </div>
        </template>
        <template v-slot:submit>
          <div class="backfill-btn">
            <c-button type="primary" block @click="submit">提交认证</c-button>
            <c-button type="primary" block @click="remitAgain"
              >重新打款</c-button
            >
            <c-button block @click="backTocCompany">返回企业认证</c-button>
          </div>
        </template>
      </c-form>
    </div>
  </div>
</template>

<script>
import {
  verifyRandomAmount,
  removeCompanyAuth,
  getRemittancecount,
  getrandomamountcount,
  reversePayment
} from "@/api/certify";
import { verifyrandomamountactivate } from "@/api/activate";

const formData = [
  {
    label: "您收到的打款金额",
    prop: "amount",
    type: "number"
  },
  {
    label: "是否生成CA签署账号",
    labelSlot: "labelOpenCa",
    prop: "openCa",
    slot: "openCa"
  },
  {
    label: " ",
    colon: false,
    slot: "submit"
  }
];

export default {
  props: {
    userAuthData: {
      type: Object
    }
  },
  data() {
    return {
      form: {
        amount: undefined,
        openCa: 1
      },
      formData,
      formRules: {
        amount: [
          {
            required: true,
            message: "请输入您收到的打款金额",
            trigger: "change"
          }
        ]
      },
      randomamountcount: 0,
      remitTime: 0,
      submitLoading: false
    };
  },
  computed: {
    // 是否激活
    isActivate() {
      return this.$route.name === "activateCompany";
    }
  },
  methods: {
    // 重新发起打款
    remitAgain() {
      let _this = this;
      this.$confirm({
        title: "温馨提示",
        content: `重新打款将消耗一次打款次数,当前剩余打款次数 ${this.remitTime} 次，确认重新打款吗?`,
        okText: "确认",
        cancelText: "取消",
        onOk() {
          return new Promise(resolve => {
            reversePayment({
              flowId: _this.userAuthData.flowId
            }).then(() => {
              _this.$message.success("重新打款成功");
              _this.remitTime--;
            });
            resolve();
          });
        }
      });
    },
    // 提交回填金额
    submit() {
      this.$refs.form.validated().then(() => {
        let _this = this;
        this.$confirm({
          title: "温馨提示",
          content: "请核实信息，是否确认提交?",
          okText: "确认",
          cancelText: "取消",
          onOk() {
            return new Promise(resolve => {
              _this.submitLoading = true;
              let request = _this.isActivate
                ? verifyrandomamountactivate
                : verifyRandomAmount;
              request({
                flowId: _this.userAuthData.flowId,
                amount: _this.form.amount,
                signState: _this.form.openCa
              })
                .then(() => {
                  _this.$emit("success");
                })
                .finally(() => {
                  _this.submitLoading = false;
                });
              resolve();
            });
          }
        });
      });
    },
    // 返回企业管理
    backTocCompany() {
      removeCompanyAuth({
        flowId: this.userAuthData.flowId
      }).then(() => {
        this.$emit("backTocCompany");
      });
    },
    // 获取剩余打款次数
    getRemitTime() {
      getRemittancecount({
        flowId: this.userAuthData.flowId
      }).then(res => {
        this.remitTime = res.remittanceCount;
      });
    },
    // 获取剩余回填金额次数
    getRandomAmountCount() {
      getrandomamountcount({
        flowId: this.userAuthData.flowId
      }).then(res => {
        this.randomamountcount = res.randomAmountCount;
      });
    }
  },
  created() {
    this.getRemitTime();
    this.getRandomAmountCount();
  }
};
</script>

<style lang="scss" scoped>
.tip {
  font-size: 35px;
  margin-bottom: 24px;
}
.backfill-btn-bottom {
  .ant-space-item {
    flex: 1;
    .c-button {
      margin-bottom: 0;
    }
  }
}
.backfill-btn {
  .c-button {
    height: 40px;
  }
  .c-button {
    margin-bottom: 15px;
  }
}
.caTip {
  color: var(--warning);
  cursor: pointer;
}
</style>
